<template>
    <div class="search-wrap">
        <div class="search">
            <input type="text" class="searchTerm" placeholder="书名 / 书号 / 作者号">
            <button type="submit" class="searchButton">
                <i class="search-icon iconfont icon-RectangleCopy"></i>
            </button>
        </div>
    </div>
</template>

<script lang='ts'>
import { ref,reactive,toRefs,defineComponent,onMounted,getCurrentInstance} from 'vue'
export default defineComponent({
    name:'',
    setup: ()=>{
        let data = reactive({
            
        })
        const { proxy } = getCurrentInstance() as any;
         
        return {
           ...toRefs(data),
        }
    }
})
</script>
<style lang="scss" scoped>
.search {
    width: 100%;
    display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 36px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}
.search-icon{
    font-size: inherit;
}

.searchButton {
    width: 40px;
    height: 36px;
    border: 1px solid #00B4CC;
    background: #00B4CC;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    //font-size: 20px;
    &:hover{
        font-size: 18px !important;
        transition:font-size 0.1s;
    }
}
</style>